

<template>
    <div class="sdy-cart">
        <SdyHeader title="啥都有" >
            <template #title>啥都没有</template>
            <template #right></template>
            <template #left>购物车</template>
        </SdyHeader>
        <div class="top">
      <van-radio :checked="selectAll"  class="select-item" name="1"></van-radio>
    </div>

    <ul class="cart">
      <li v-for="item in cartList" :key="item.proid">
        <van-radio @click="updateStatus(item.cartid, !item.flag)" :checked="item.flag" class="select-item" name="1"></van-radio>
        <van-card
          class="goods-item"
          :price="item.originprice"
          desc="描述信息"
          :title="item.proname"
          :thumb="item.img1"
        >
          <template #tags>
            <van-tag plain type="primary">-</van-tag>
            <input class="num-inp" type="text" :value="item.num">
            <van-tag plain type="primary">+</van-tag>
          </template>
          <template #footer>
            <van-button size="mini">按钮</van-button>
            <van-button size="mini">按钮</van-button>
          </template>
        </van-card>
      </li>
    </ul>

    <div class="bottom">
      总价 : {{ totalPrice.toFixed(2) }}
    </div>
    <hr>
    {{ goodsList }}
         <!-- 底部内容 -->
    <Teleport to="#sdy-footer">
      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" />
        <van-action-bar-icon icon="cart-o" text="查看订单" />
        <van-action-bar-icon icon="shop-o" text="店铺" />
        <van-action-bar-button type="danger" text="生成订单" />
      </van-action-bar>
    </Teleport>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import { useRouter, type Router } from 'vue-router'
import { Dialog } from 'vant'
import type {MyCartItem,MyHotItem} from '@/config/inter'
import {getCartListApi,updateStatusApi} from '@/api/cart'
import {hotSearchApi} from '@/api/goods'


const $router: Router = useRouter()
const  token = window.localStorage.getItem('token')
const user_id = window.localStorage.getItem('user_id')
  
// 验证登录
const testToken = ()=>{
  
  
  if(!token || !user_id){
    Dialog({
      title:'提示',
      message:'还未登录'
    }).then(()=>{
      $router.push({path:'/login'})
    })
    return
  }
}


// 获取购物车列表
const cartList = ref<MyCartItem[]>([])

// 根据用户id去请求点击添加进购物车的商品
const getCartList = async () => {
  const res = await getCartListApi(user_id as string)
  cartList.value = res.data
  console.log(res)
}


// 获取热门相关内容
const goodsList = ref<MyHotItem[]>([])
const getGoodsList = async () => {
  const res = await hotSearchApi()
  goodsList.value = res.data
}


// 准备一个全选 
const selectAll = computed(()=>{
  // 根据每个购物车内容是否选中判断全选是否应该选中
  return cartList.value.every (item=>item.flag)
})


// 准备一个总价
const totalPrice = computed(()=>{
  return cartList.value.reduce((prev,item)=>{
    if(item.flag){
      return prev + (item.originprice * item.num)
    } else {
      return prev
    }
  },0)
})


// 修改购物车选中状态  用商品id 加上是否选中状态
const updateStatus = async (id:string,flag:boolean)=>{
    const res = await updateStatusApi(id,flag)
    // console.log(res)
    // 如果改变了那就重新渲染
    if(res.code === '200'){
      getCartList()
    }
  // 更改的只是商品选中状态仍然在购物车
}
 

onMounted(() => {
  testToken()
  getCartList()
  getGoodsList()
})


</script>

<style scoped lang="scss">
.cart {

  li {
    display: flex;
    box-sizing: border-box;
    padding: 0 10px;

    > .select-item {
      width: 30px;
    }

    > .goods-item {
      flex: 1;
    }
  }
}

.num-inp {
  width: 30px;
  text-align: center;
  margin: 0 10px;

}

</style>